<span style="font-family:SimSun;font-size:14px;"><!--文档类型声明(DTD)：告诉浏览器当前页面使用的语法标准,方便浏览器按照声明的标准去渲染你的页面 ***必须写在第一行-->
<!DOCTYPE html>
<!--html文档的开始-->
<!--lang展示语言 en:英文 zh:中文 也可以不带参数-->
<html lang="en">
<!--head里的信息用于描述网页，元数据（描述数据的数据）-->
<head>

    <!--meta类标签：
        1：指定文档的编码方式
        2：添加网页描述
        3：添加网页关键字
        4：添加作者信息-->
    <meta charset="UTF-8">
    <meta name="description" content="这是我学习h5写出的一个网页">
    <meta name="keywords" content="html5,属性,标签">
    <meta name="author" content="Sherry Yang">

    <!--link类标签：
        1：引用外部css文件
        2：指定浏览器网页标签栏图标-->
    <!--<link rel="stylesheet" href="../../css/demo.css">-->
    <link rel="icon" href="../../img/qqzone.png">

    <!--title标签：
       1：指定浏览器网页标签栏内容-->
    <title>我的第一个网页</title>

</head>

<!--body用来包含要在页面显示的所有内容-->
<body>

<!--标签的分类
1：块级标签  特点：独占一行
2：行级标签  特点：宽度跟自己的内容等宽-->

<!--hx标签  标题-->
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--hr标签：分割线-->
<hr>

<!--p标签：定义一个段落，没在标签内的字符自动换行-->
<!--1：元素   <p style="color: red;">我是一个段落</p>  -->
<!--2：标签   <p>/p>   -->
<!--3：属性   style="color: red;"   -->
<!--4：内容   我是一个段落     -->
<!--标签的特点：
        1:标签是成对出现的（单个标签页存在） 前面的标签是开始标签，后面的标签是结束标签(闭合标签)   。
        2:结束标签（闭合标签）有/-->

<!--属性的特点：
        1:标签的一部分，存在页标签内
        2:可以同时存在多个标签
        3:属性和属性值成对出现-->
<p style="font-size: 32px;font-weight: bolder;color: red;">我是一个段落</p>
段落一

<!--换行标签-->
<br>
<br>

<!--引用标签:
       cite属性表明引用的来源，一般表明引用网址。浏览器默认显示为首行缩进。-->
<blockquote cite="www.baidu.com">
    横眉冷对千夫指，俯首甘为孺子牛。
</blockquote>

<!--预格式标签 :保留文本默认的样式-->
    <pre>
        var fun = function () {
            console.log("这样的小城市，我不会来几次！");
        }
    </pre>

<!--span：
            1：用于包裹文本中的某一个或某几个字段，以方便添加样式。
            2：它本身是没有任何样式的  -->
<p>商品价格：仅售<span style="color: red;font-size: 50px">10</span>元</p>

<!--自闭合标签 ：自己没有内容要展示，通过属性就可以完成标签的配置
  img标签常见属性：
        1：src：用来指定你要显示的图片的路径。
        2：alt：当你指定的图片不存在时，相关的错误提示信息。
        3：title：当鼠标悬浮在图片上时，相关的提示信息。
        4：align：指定图片的显示位置
        5：width:指定图片的宽度
        6：heght：指定图片的高度-->
<img src="../../img/left.jpeg" alt="图片不存在！" title="阿娇"
     width="320" height="200">
<br>

<!--a标签 超链接
     常见属性：
        1：href 用来指定超链接要跳转的页面  页面可以本地页面，也可以是非本地页面。
        2：title  用来指定鼠标悬浮时的提示文本
        3：target  用来指定要打开的网页在什么位置显示
                    _self   _blank
        4：rel  用来指定要打开的页面和当前页面的关系  添加该属性可以做到搜索引擎优化。
                    next   prev  -->
<a href="http://www.jredu100.com/">打开杰瑞教育首页</a>

<br>

<!--em:
    1：显示效果为倾斜，并且有强调意思。可以更方便的被浏览器搜索到。-->
<!--i:
    1：显示效果为倾斜，没有强调意思。-->
<em>版权所有，侵权必究</em>  --山东出版社
<br>
<i>版权所有，侵权必究</i>  --山东出版社

<p>版权所有，侵权必究    ---山东出版社</p>

<!--strong:
   1：显示效果为粗体，并且有强调意思。可以更方便的被浏览器搜索到。-->
<!--b:
    1：显示效果为粗体，没有强调意思。-->
<strong>
    版权所有，侵权必究    ---山东出版社
</strong>
<br>
<b>
    版权所有，侵权必究    ---山东出版社
</b>
<br>

<!--q：主动为你的内容加上引号-->
<p>版权所有，侵权必究    --- <q>山东出版社</q></p>

<!--small ：相比相邻的文本，small标签里的字体会更小-->
<p>版权<small>所有</small>，侵权必究    --- 山东出版社</p>
<p>版权<big>所有</big>，侵权必究    --- 山东出版社</p>

<!--删除线 用来显示删除数据-->
<br>

<strike>这是被删除的文本</strike>
<br>
<s>这是被删除的文本</s>
<br>
<!--HTML5推荐的实现方法-->
<span style="text-decoration: line-through">这是被删除的文本</span>

<!--u:下划线-->
<br>
<u>下划线文本</u>
<br>
<!--HTML5推荐的实现方法-->
<span style="text-decoration: underline">下划线文本</span>
<br>
<span style="text-decoration: overline">上划线文本</span>

<!--cite标签：浏览器显示为倾斜，常用于书、画作、作品的引用-->
<br>
<cite>这是cite标签</cite>

<!--mark:高亮或标记文本  浏览器显示为黄色背景-->
<br>
<mark>高亮显示文本</mark>
<!--code：只是表示计算机代码。但是浏览器只会显示等宽字体，
        不会保留代码格式，需配合pre标签使用-->
        <pre>
        <code>
            StringBuffer sb = new StringBuffer();
            for(String s : arr){
            sb.append(s);
            }
        </code>
        </pre>

<!--bdo：表示文本方向，dir="ltr" 从左往右  dir="rtl" 从右往左-->
<br>
<bdo dir="rtl">天道酬勤</bdo>

<!--sup：上标文本-->
<br>
X<sup>2</sup>

<!--sub：下标文本-->
<br>
log<sub>2</sub>10
<br>
S<sub>2</sub>O<sup>-4</sup>

<p>你好    漂亮</p>

<!--版权符号-->
&copy;
<!--左括号-->
<br>
<
<!--右尖括号-->
<br>
>
<!--斜线-->
<br>
/

<u>下划线</u>
<br>
<u>下划线</u>
<br>
<del>删除字</del>
<br>

</body>
</html>

</span>